<template>
  <div class="bg">
    <div class="wapper-content">
      <div class="buyheader" @click="chooseaddress">
        <!-- 收货地址 -->
        <van-icon name="location-o" size="40" class="buyheader-icon" />
        <div class="buyheader-address">
          <div class="buyheader-name">{{ addressList.name }}</div>
          <span>{{ addressList.tel }}</span>
          <div class="buyheader-addressList">{{ addressList.detail }}</div>
        </div>
        <van-icon
          name="arrow"
          size="20px"
          class="buyheader-icon-right"
        ></van-icon>
      </div>
      <!-- 循环商品 -->
      <div v-for="(item, index) in buyGoodsList" :key="index">
        <div class="buybanner">
          <van-card
            class="cartinfo"
            :desc="item.description"
            :title="item.title"
            :thumb="item.img"
            :price="item.price"
            :num="item.buyAmount"
          >
          </van-card>
        </div>
      </div>
      <!-- 地址信息弹出页面 -->
      <van-popup v-model="popShow" position="bottom" :style="{ height: '75%' }">
        <van-address-list
          v-if="addressData.length !== 0"
          :list="addressData"
          v-model="defaultAddressId"
          @click-item="addressChange"
        ></van-address-list>
      </van-popup>
    </div>
    <!-- 底部 -->
    <van-submit-bar
      :price="totalPrice * 100"
      button-text="创建订单"
      @submit="createOrder()"
    ></van-submit-bar>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
  name: "BuyVue",
  data() {
    return {
      totalPrice: 0,
      buyMode: false,
      buyGoodsList: [],
      popShow: false,
      addressList: {},
      addressData: [],
      defaultAddressId: 0,
      uid: {
        userid: 1,
      },
    };
  },
  created() {
    this.buyGoodsList = this.orderList.buyOrderList;
    console.log("this.buyGoodsList:", this.buyGoodsList);

    this.totalPrice = this.buyGoodsList.reduce((prev, cur) => {
      return prev + cur.price * cur.buyAmount;
    }, 0);
    this.getAddressData();
  },
  methods: {
    // 请求收货地址
    async getAddressData() {
      await this.$http
        .post("http://localhost:8080/address/addres", this.uid, {
          // 在前端使用 axios.post 发送 POST 请求时，默认使用 JSON 格式传递数据，而在后端的代码中使用的是表单数据的方式进行解析。这时候可以尝试在 Axios 请求头中指定请求数据的格式：
          headers: {
            "Content-Type": "application/x-www-form-urlencoded", // 或者 'multipart/form-data'
          },
        })
        .then((result) => {
          console.log("result:", result);
          if (result.code === 0) {
            this.addressData = result.data;
            console.log("addressData:", this.addressData);

            this.addressData.map((item) => {
              item.address = item.detail;
              if (item.isDefault) {
                this.addressList = item;
                this.defaultAddressId = item.id;
              }
            });
          }
        });
    },
    // 点击地址
    addressChange(data) {
      this.defaultAddressId = data.id;
      this.addressList = this.addressData.find((item) => item.id == data.id);
      this.popShow = false;
    },
    // 点击创建订单
    createOrder() {
      let items = [];
      this.buyGoodsList.map((item) => {
        items.push({
          skuId: item.id,
          count: item.buyAmount,
        });
      });
      let form = {
        items: items,
        addressId: this.defaultAddressId,
      };
      console.log("form:",JSON.stringify(form));

      //创建订单
      this.$http
        .post("http://localhost:8080/order/add", JSON.stringify(form), {
          headers: {
            "Content-Type": "application/json",
          },
        })
        .then((result) => {
          if (result.code == 0) {
            this.$toast.success("创建订单成功");
            // buyMode 代表是什么方式进入订单页面 0商品详情 1购物车详情
            if (this.$route.params.buyMode == 1) {
              this.$store.commit("shopcart/clearCar");
            }
            this.$router.go(-1);
          }
        });
    },
    // 点击弹出页面
    chooseaddress() {
      this.popShow = true;
      console.log("this.popShow:", this.popShow);
    },
  },
  computed: {
    ...mapState(["orderList"]),
    ...mapGetters(["addOrder", "clearCar"]),
  },
};
</script>

<style scoped>
.van-card {
  text-align: left;
  border-radius: 8px;
  background: white;
}
.van-address-list__bottom {
  display: none;
}
.van-address-item__edit {
  display: none;
}
.bg {
  width: 100%;
  height: calc(100% - 46px - 50px);
  position: absolute;
  overflow-y: auto;
  background: lightgray;
}
.buyheader {
  height: 100px;
  background: white;
  border-radius: 8px 8px;
  margin: 10px5px;
}
.buybanner {
  background: white;
  border-radius: 8px;
  margin: 10px 5px;
}
.buy-bottom {
  border-radius: 0 0 8px 8px;
}
.wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 100%;
}
.block {
  /* width: 400px;
  height: 500px; */
  width: 100%;
  height: 60%;
  background-color: #fff;
}
.deliver {
  padding-top: 10px;
}
.exit {
  padding: 0 10px 0 0;
  float: right;
  font-size: 26px;
}
.kind {
  padding-top: 40px;
  text-align: left;
}
.explain {
  padding-left: 15px;
}
.check {
  float: right;
  zoom: 130%;
  margin: 2px 10px 0 0;
}
input[type="checkbox"]::after {
  background-color: blue;
  color: white;
}
.finish {
  position: fixed;
  bottom: 10px;
  height: 50px;
  width: 100%;
}
.finished {
  background-color: tomato;
  color: white;
  font-size: 20px;
  height: 35px;
  width: 90%;
  border: none;
  border-radius: 30px;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
}
.buyheader-icon {
  float: left;
  margin-top: 25px;
  margin-left: 30px;
  margin-right: 30px;
  border-bottom: black 2px solid;
}
.buyheader-address {
  float: left;
  margin-top: 20px;
  text-align: left;
}
.buyheader-name {
  margin-right: 50px;
}
.buyheader-addressdetail {
  margin-top: 5px;
}
.buyheader-icon-right {
  position: absolute;
  top: 100px;
  right: 20px;
}
</style>